<template>
  <div class="my">
    <!-- 导航栏 -->
    <van-nav-bar title="我的" left-arrow @click-left="$router.push('/index')">
    </van-nav-bar>
    <!-- 登录栏 -->
    <router-link to="/login">
      <div class="profile">
        <div class="port iconfont icon-touxiang"></div>
        <div class="profile-center">
          <div class="name">
            {{ user_id ? this.username : "登录/注册" }}
          </div>
          <div class="phone">
            <van-icon name="graphic" size="20px" />
            {{ user_id ? this.mobile : "暂无绑定手机号" }}
          </div>
        </div>
        <van-icon name="arrow" color="#fff" />
      </div>
    </router-link>
    <!-- 功能栏 -->
    <!-- <van-grid :border="true" :column-num="3">
      <van-grid-item to="/mymoney"
        >{{ balance }}元<span>我的余额</span>
      </van-grid-item>
      <van-grid-item to="/youhui"
        >{{ gift_amount }}个<span>我的优惠</span>
      </van-grid-item>
      <van-grid-item to="jifen"
        >{{ point }}分<span>我的积分</span>
      </van-grid-item>
    </van-grid> -->

    <div class="foot">
      <div class="balance" @click="$router.push('/mymoney')">
        <p>
          <i class="unit">{{ balance }}</i> 元
        </p>
        <p>我的余额</p>
      </div>
      <div class="discounts" @click="$router.push('/youhui')">
        <p>
          <i class="entries">{{ gift_amount }}</i> 个
        </p>
        <p>我的优惠</p>
      </div>
      <div class="inregral" @click="$router.push('/jifen')">
        <p>
          <i class="analyze">{{ point }}</i> 分
        </p>
        <p>我的积分</p>
      </div>
    </div>
    <!-- 列表 -->

    <van-cell
      @click="$router.push('/dingdan')"
      icon="orders-o"
      title="我的订单"
      is-link
    />
    <van-cell
      @click="$router.push('/shopping')"
      icon="send-gift-o"
      title="积分商城"
      is-link
    />
    <van-cell
      @click="$router.push('/huiyuan')"
      icon="gem-o"
      title="饿了么会员卡"
      is-link
    />
    <van-cell
      @click="$router.push('/fuwu')"
      icon="credit-pay"
      title="服务中心"
      is-link
    />
    <van-cell
      @click="$router.push('/download')"
      icon="down"
      title="下载饿了么APP"
      is-link
    />
    <!-- 底部 -->
    <!-- <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o" @click="$router.push('/index')"
        >外卖</van-tabbar-item
      >
      <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item name="friends" icon="friends-o">订单</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar> -->
    <myfooter :str="active"></myfooter>
  </div>
</template>

<script>
// 引入获取用户信息接口
import { user, list, login } from "../api/user";
import myfooter from "../components/footer.vue";

export default {
  components: { myfooter },
  data() {
    return {
      balance: "0.00",
      gift_amount: "0",
      point: "0",
      mobile: "暂无绑定手机号",
      username: "登录/注册",
      user_id: "2",
      /*  active: 0, */
      active: "my",
    };
  },
  created() {
    // user({
    //   user_id: this.user_id,
    // }).then((res) => {
    //   console.log(100, res);
    //   // this.username = res.data.username;
    //   // this.balance = res.data.balance;
    //   // this.gift_amount = res.data.gift_amount;
    //   // this.point = res.data.point;
    //   // this.mobile = res.data.mobile;
    //   console.log("128", this.username);
    //   // console.log("129", this.balance);
    // });
    user(localStorage.getItem("ele-68")).then((res) => {
      console.log(133, res);
      this.user_id = res.data.data;
    });
  },
  methods: {},
};
</script>

<style lang="less" scoped>
@import "https://at.alicdn.com/t/font_2887397_53wo68ypt9s.css";

.port {
  width: 30%;
  height: 100px;
  line-height: 100px;
  float: left;
  font-size: 70px;
  text-align: center;
  color: #fff;
  margin-left: -20px;
}
.my {
  background-color: #f2f2f2;
}
/deep/.van-nav-bar {
  background-color: #3190e8;
  .van-nav-bar__title {
    color: white;
    font-size: 24px;
    font-weight: 700;
  }
  .van-nav-bar__arrow {
    color: #fff;
    font-size: 20px;
  }
}

.profile {
  display: flex;
  height: 100px;
  padding: 20px 10px;
  justify-content: space-between;
  align-items: center;
  background-color: #3190e8;

  .profile-center {
    flex: 1;
    padding: 0 -10px;
  }

  .name {
    color: white;
    font-size: 25px;
    font-weight: 700;
  }

  .phone {
    color: #fff;
    font-size: 18px;
    margin-top: 5px;
  }
}
// .van-grid {
//   margin-bottom: 20px;
// }
// .van-grid-item {
//   span {
//     color: #666;
//   }
// }
.list {
  margin-top: 10px;
  background-color: #fff;
}
li a {
  display: block;
  height: 1.3467rem;
  // line-height: 1.3467rem;
  border-bottom: 1px solid #ccc;
  padding: 0.4267rem 0.6133rem 0.4267rem 0.5333rem;
  font-size: 0.3467rem;

  .jt {
    float: right;
  }
}
.botton {
  margin-top: 10px;
}

.foot {
  display: flex;
  height: 100px;
  color: #666666;
  background-color: #fff;
  margin-bottom: 10px;
  div {
    flex: 1;
    p i {
      font-size: 40px;
      font-weight: 700;
    }
  }
}
.balance {
  height: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  .unit {
    color: #ff9900;
  }
}
.discounts {
  border-right: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  height: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  .entries {
    color: hsl(9, 94%, 49%);
  }
}
.inregral {
  height: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  .analyze {
    color: #6ac20b;
  }
}
</style>